<template>
	<dt-main-body v-model="labelPosition">
		<div class="location">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>
					<i class="iconfont icon-home"></i>
					管理中心
				</el-breadcrumb-item>
				<el-breadcrumb-item>店铺文章</el-breadcrumb-item>
				<el-breadcrumb-item>编辑内容</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="content-box">
			<el-form ref="editForm" :model="model" :rules="rules" :label-position="labelPosition" label-width="120px">
				<el-tabs v-model="activeName" type="card">
					<el-tab-pane label="基本信息" name="info">
						<div class="tab-content">
							<el-form-item prop="merchantId" label="所属商户">
								<dt-merchant-select v-model="model.merchantId" placeholder="请选择..."></dt-merchant-select>
							</el-form-item>
							<el-form-item label="状态">
								<el-radio-group v-model="model.status">
									<el-radio-button label="0">正常</el-radio-button>
									<el-radio-button label="1">待审</el-radio-button>
									<el-radio-button label="2">不通过</el-radio-button>
								</el-radio-group>
							</el-form-item>
							<el-form-item prop="categoryId" label="选择类别">
								<el-select v-model="model.categoryId" placeholder="请选择...">
									<el-option v-for="item in categoryList"
										:key="item.id"
										:label="item.title"
										:value="item.id">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item prop="title" label="标题">
								<el-input v-model="model.title" placeholder="" show-word-limit maxlength="512"></el-input>
							</el-form-item>
							<el-form-item prop="imgUrl" label="封面图片">
								<dt-upload-text v-model="model.imgUrl"
									placeholder="请上传封面图片"
									width="20%"
									height="10%"
									fit="cover"
									:size="sysconfig.imgSize"
									exts="jpg,jpeg,png,gif"
									action="/upload">
								</dt-upload-text>
							</el-form-item>
							<el-form-item prop="sortId" label="排序数字" :rules="rules.number">
							    <el-input v-model="model.sortId" placeholder="数字越小越排前"></el-input>
							</el-form-item>
							<el-form-item prop="click" label="浏览次数" :rules="rules.number">
							    <el-input v-model="model.click" placeholder=""></el-input>
							</el-form-item>
							<el-form-item prop="source" label="来源">
							    <el-input v-model="model.source" placeholder="文章的来源地址"></el-input>
							</el-form-item>
							<el-form-item prop="author" label="作者">
							    <el-input v-model="model.author" placeholder="文章作者"></el-input>
							</el-form-item>
							<el-form-item label="发布时间" v-if="model.id>0">
								{{model.addBy}} {{model.addTime}}
							</el-form-item>
							<el-form-item label="最后更新" v-if="model.id>0&&model.updateTime">
								{{model.updateBy}} {{model.updateTime}}
							</el-form-item>
						</div>
					</el-tab-pane>
					<el-tab-pane label="详细描述" name="details">
						<div class="tab-content">
							<el-form-item prop="zhaiyao" label="内容摘要">
								<el-input type="textarea" :row="3" v-model="model.zhaiyao" show-word-limit maxlength="255"></el-input>
							</el-form-item>
							<el-form-item prop="content" label="内容介绍">
								<dt-editor v-model="model.content" placeholder="请输入内容介绍"></dt-editor>
							</el-form-item>
						</div>
					</el-tab-pane>
				</el-tabs>
			</el-form>
		</div>
		
		<div class="footer-box">
			<div class="footer-btn">
				<el-button type="primary" :loading="loading" @click="submitForm">确认保存</el-button>
				<el-button plain @click="$common.back()">返回上一页</el-button>
			</div>
		</div>
	</dt-main-body>
</template>

<script>
	import DtMerchantSelect from '../../../components/DtMerchantSelect.vue'
	import DtUploadText from '../../../components/DtUploadText.vue'
	import DtEditor from '../../../components/DtEditor.vue'
	export default {
		components: {
			DtMerchantSelect,
			DtUploadText,
			DtEditor
		},
		props: {
			id: 0
		},
		data() {
			return {
				activeName: 'info', //当前选项卡
				labelPosition: 'right', //表单对齐方式
				loading: false,
				sysconfig: {}, //系统信息
				categoryList: [], //类别列表
				model: {
					id: 0,
					merchantId: null,
					categoryId: null,
					title: '',
					source: '本店',
					author: '管理员',
					imgUrl: '',
					zhaiyao: '',
					content: '',
					sortId: 99,
					click: 100,
					status: 0,
					addBy: null,
					addTime: null
				},
				rules: {
					categoryId: [
						{ required: true, message: '请选择文章类别', trigger: 'change' }
					],
					title: [
						{ required: true, message: '标题不可为空', trigger: 'blur' },
						{ max: 512, message: '标题不可超出512字符', trigger: 'blur' }
					],
					source: [
						{ max: 128, message: '来源不可超出128字符', trigger: 'blur' }
					],
					author: [
						{ max: 128, message: '作者不可超出128字符', trigger: 'blur' }
					],
					imgUrl: [
						{ max: 512, message: '图片地址不可超出512字符', trigger: 'blur' }
					],
					zhaiyao: [
						{ max: 255, message: '内容摘要不可超出255字符', trigger: 'blur' }
					],
					content: [
						{ required: true, message: '内容不可为空', trigger: 'blur' },
					],
				},
			}
		},
		methods: {
			//初始化数据
			async initData() {
				let _this = this; //当前页面
				const loading = _this.$loading();
				//获取系统信息
				await _this.$api.request({
					url: `/client/setting/uploadconfig`,
					success(res) {
						_this.sysconfig = res.data;
				    }
				});
				//获取分类列表
				await _this.$api.request({
				    url: `/admin/merchant/article/category/view/0?status=0`,
				    success(res) {
						_this.categoryList = res.data;
				    }
				});
				//获取文章信息
				if (_this.id > 0) {
					await _this.$api.request({
						url: `/admin/merchant/article/${_this.id}`,
						success(res) {
							//赋值给model
							Object.keys(_this.model).forEach(key => { _this.model[key] = res.data[key] });
						}
					});
				}
				loading.close();
			},
			//表单提交
			submitForm() {
				let _this = this; //当前页面
				//多个表单验证
				const f1 = new Promise((resolve, reject) => {
					_this.$refs['editForm'].validate((valid) => {
						if (valid) resolve();
					});
				});
				Promise.all([f1]).then(() => {
					//提交表单,Id大于0则修改，否则添加
					if (_this.model.id > 0) {
						_this.$api.request({
							method: 'put',
							url: `/admin/merchant/article/${_this.model.id}`,
							data: _this.model,
							successMsg: '修改店铺文章成功',
							beforeSend() {
								_this.loading = true;
							},
							success(res) {
								//跳转到列表页
								_this.$common.linkUrl('/merchant/article/list');
							},
							complete() {
								_this.loading = false
							}
						});
					} else {
						_this.$api.request({
							method: 'post',
							url: `/admin/merchant/article`,
							data: _this.model,
							successMsg: '新增店铺文章成功',
							beforeSend() {
								_this.loading = true;
							},
							success(res) {
								//重置表单
								_this.$refs['editForm'].resetFields();
							},
							complete() {
								_this.loading = false
							}
						});
					}
				})
			},
		},
		created() {
			this.initData();
		}
	}
</script>